<template>
	<div>
		<WMHead :form="data.form" @search="search" :label-width="70">
			<template #action>

			</template>
		</WMHead>
		<WMtable v-model:page="data.page.page" v-model:limit="data.page.limit" v-model:totalPage="data.page.totalPage"
			@change="change" :column="data.column" :list="data.list">
			<template #action="row">
				<el-button type="danger" size="mini" @click="deleteOne(row.id)">删除</el-button>
				<el-button type="warning" size="mini" @click="down(row.path)">下载</el-button>
			</template>
		</WMTable>
	</div>
</template>

<script>
	import WMtable from '/@/components/from/WMTable.vue'
	import WMHead from '/@/components/from/WmHead.vue'
	import {
		getFileList,
		deleteFile
	} from '/@/api/file.js'

	import {
		downField
	} from '/@/utils/common.js'

	import {
		reactive,
		toRef,
		ref,
		computed,
		onMounted
	} from 'vue';

	export default {
		name: 'file',
		components: {
			WMtable,
			WMHead,
		},

		setup() {


			const data = reactive({
				page: {
					page: 1,
					limit: 5,
					totalPage: 0,
					type: 'integral'
				},
				column: [{
						field: "id",
						name: "编号",
						model: "input",
						width: "100"
					},
					{
						field: "name",
						name: "名称",
						model: "input",
						width: "300"
					},
					{
						field: "fileName",
						name: "文件名",
						model: "input",
						width: "300"
					},
					{
						field: "addTime",
						name: "添加时间",
						model: "input",
						width: "140"
					},

				],
				form: [{
					name: "名称",
					field: "name",
					model: "input",
					width: 200,
				}, ],
				list: [],
			})

			onMounted(() => {})

			const getList = () => {
				getFileList(data.page).then(res => {
					data.page.totalPage = res.data.pages
					data.list = res.data.list
				})
			}

			const change = (page) => {
				getList()
			}
			const search = (params) => {
				data.page.page = 1
				Object.assign(data.page, params)
				getList()
			}

			const deleteOne = (id) => {
				deleteFile({
					id: id
				}).then(res => {
					getList()
				})
			}

			const down = (path) => {
				downField(path)
			}


			return {
				data,
				change,
				search,
				deleteOne,
				down
			}
		}
	}
</script>

<style>

</style>